<!-- pages/login/login.vue -->
<template>
  <view class="login-container">
    <!-- 登录表单 -->
    <view class="login-form">
      
      <view class="form-group">
        <!-- 用户名输入 -->
        <view class="input-wrapper">
          <text class="icon fa fa-user"></text>
          <input 
            type="text" 
            placeholder="请输入用户名" 
            v-model="username"
            @blur="validateField('username')"
          />
          <text v-if="errors.username" class="error-message">{{ errors.username }}</text>
        </view>
        
        <!-- 密码输入 -->
        <view class="input-wrapper">
          <text class="icon fa fa-lock"></text>
          <input 
            type="password" 
            placeholder="请输入密码" 
            v-model="password"
            @blur="validateField('password')"
          />
          <text v-if="errors.password" class="error-message">{{ errors.password }}</text>
        </view>
        
        <!-- 记住密码 -->
        <view class="remember-me">
          <checkbox :checked="rememberMe" @change="toggleRememberMe" />
          <text>记住密码</text>
        </view>
        
        <!-- 登录按钮 -->
        <button 
          class="login-btn" 
          :disabled="!isFormValid" 
          @click="handleLogin"
        >
          {{loading ? '登录中...' : '登录'}}
        </button>
    
      </view>
    </view>
  </view>
</template>

<script>
	import request from '../../utils/request.js'
export default {
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false,
      errors: {
        username: '',
        password: ''
      },
      loading: false
    }
  },
  computed: {
    // 表单是否有效
    isFormValid() {
      return this.username.trim() && this.password.trim() && 
             !this.errors.username && !this.errors.password
    }
  },
  onLoad() {
	  console.log("===onLoad")
    // 检查本地存储中是否有记住的用户信息
    const userInfo = uni.getStorageSync('userInfo')
    // if (userInfo) {
    //   this.username = userInfo.username
    //   this.password = userInfo.password
    //   this.rememberMe = true
    // }
  },
  methods: {
    // 字段验证
    validateField(field) {
      if (field === 'username' && !this.username.trim()) {
        this.errors.username = '请输入用户名'
      } else {
        this.errors.username = ''
      }
      
      if (field === 'password' && !this.password.trim()) {
        this.errors.password = '请输入密码'
      } else if (field === 'password' && this.password.length < 6) {
        this.errors.password = '密码长度不能少于6位'
      } else {
        this.errors.password = ''
      }
    },
	
	async handleLogin() {
	  if (!this.username || !this.password) {
	    this.errorMessage = '用户名和密码不能为空';
	    return;
	  }
	  
	  try {
		  console.log({
	      username: this.username,
	      password: this.password
	    })
	    const res = await request.post('/api/auth/login', {
	      username: this.username,
	      password: this.password
	    });
		console.log("=====" + res)
	    
	    if (res.token) {
	      uni.setStorageSync('token', res.token);
	      uni.navigateTo({
	        url: '/pages/dashboard/dashboard'
	      });
	    } else {
	      this.errorMessage = res.message || '登录失败';
	    }
	  } catch (error) {
		  ////请求拦截器和响应拦截器中执行到error，才会执行到这。
	    // this.errorMessage = error.response.data;
	    // console.error('登录错误:' + error);
		// uni.showToast({
		//   title: this.errorMessage,
		//   icon: 'none'
		// });
		// console.log(error.response.data)
	  }
	},
    
    // 切换记住密码状态
    toggleRememberMe(e) {
      this.rememberMe = e.detail.value.length > 0
    },
    
    // 保存用户信息到本地存储
    saveUserInfo(response) {
      // 保存token
      uni.setStorageSync('token', response.token)
      
      // 保存用户信息
      uni.setStorageSync('userInfo', {
        username: this.username,
        ...response.userInfo
      })
      
      // 如果选择了记住密码，保存密码
      if (this.rememberMe) {
        uni.setStorageSync('userInfo', {
          username: this.username,
          password: this.password,
          ...response.userInfo
        })
      } else {
        // 否则只保存用户名和用户信息
        const userInfo = uni.getStorageSync('userInfo')
        if (userInfo) {
          userInfo.password = undefined
          uni.setStorageSync('userInfo', userInfo)
        }
      }
    },
    
    // 显示成功提示
    showSuccessToast(message = '登录成功') {
      uni.showToast({
        title: message,
        icon: 'success',
        duration: 2000
      })
    },
    
    // 显示错误提示
    showErrorToast(message) {
      uni.showToast({
        title: "error message:" + message,
        icon: 'none',
        duration: 2500
      })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 30rpx;
  background-color: #f7f7f7;
  
  .login-form {
    width: 100%;
    max-width: 600rpx;
    
    .logo {
      display: flex;
      justify-content: center;
      margin-bottom: 80rpx;
      
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }
    
    .form-group {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 40rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      
      .input-wrapper {
        display: flex;
        flex-direction: column;
        border-bottom: 2rpx solid #eee;
        padding: 20rpx 0;
        margin-bottom: 30rpx;
        
        .icon {
          position: absolute;
          width: 60rpx;
          text-align: center;
          color: #999;
          font-size: 28rpx;
          line-height: 60rpx;
        }
        
        input {
          flex: 1;
          font-size: 28rpx;
          padding-left: 60rpx;
          height: 60rpx;
        }
        
        .error-message {
          color: #f5222d;
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }
      
      .remember-me {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 40rpx;
        
        checkbox {
          transform: scale(0.8);
          margin-right: 10rpx;
        }
      }
      
      .login-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background-color: #165DFF;
        color: #fff;
        border-radius: 44rpx;
        font-size: 30rpx;
        margin-bottom: 40rpx;
        
        &:disabled {
          background-color: #cccccc;
        }
      }
      
      .links {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        
        .forgot-password {
          color: #666;
        }
        
        .register {
          color: #165DFF;
        }
      }
    }
  }
}
</style>